<template>
    <div class="demo">
        <h1>{{ msg }}</h1>
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>学生年龄：{{ myAge + 1 }}</h2>
        <button @click="updateAge">尝试修改传过来的值</button>
    </div>
</template>

<script>
export default {
    name: "StudentInfo",
    data() {
        return {
            msg: "哈哈",
            myAge: this.age,
        };
    },
    methods: {
        updateAge() {
            this.myAge++;
        },
    },
    props: ["name", "sex", "age"], //简单声明接收

    //接收的同时对数据进行类型限制
    /* props: {
        name: String,
        age: Number,
        sex: String,
    }, */

    //接收的同时数据进行类型限制+默认值的指定+必要性的限制
    /* props: {
        name: {
            type: String, //name的类型是字符串
            required: true, //name是必要的
        },
        age: {
            type: Number,
            default: 0, //默认值
        },
        sex: {
            type: String,
            required: true,
        },
    }, */
};
</script>

<style>
.demo {
    background-color: rgb(145, 145, 145);
}
</style>